<template>
  <h2 class="text" @mouseover="startHover" @mouseout="resetHover">
    <span v-for="(letter, index) in letters" :key="index" :style="letterStyle(index)">
      {{ letter }}
    </span>
  </h2>
</template>

<script>
export default {
  name: 'TextHover',
  props: {
    text: {
      type: String,
      default: 'Vanilla JavaScript'
    }
  },
  data()
  {
    return {
      letters: [],
      isHovering: false
    }
  },
  methods: {
    startHover()
    {
      this.isHovering = true
    },
    resetHover()
    {
      this.isHovering = false
    },
    letterStyle(index)
    {
      const delay = index * 40
      const hueRotate = index * 30
      return {
        transitionDelay: `${delay}ms`,
        filter: `hue-rotate(${hueRotate}deg)`,
        color: this.isHovering ? '#0f0' : '#555',
        textShadow: this.isHovering ? '0 0 5px #0f0, 0 0 15px #0f0, 0 0 30px #0f0' : 'none'
      }
    }
  },
  mounted()
  {
    this.letters = this.text.split('')
  }
}
</script>

<style scoped>
*::after, *::before {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #222;
}

h2 {
  position: relative;
  font-size: 3em;
  letter-spacing: .05em;
  cursor: default;
  text-transform: uppercase;
  font-weight: 500;
}
</style>
